<template>
  <view class="poshsoahs" v-if="showStatus">
   <uni-popup
    ref="popup"
    type="bottom"
    v-show="showStatus"
    border-radius="10px 10px 0 0"
    background-color="white"
    width="100%"
  >
    <view class="popUpView">
      <view class="title">
        获取您的昵称
      </view>
<!--      <view class="img">-->
<!--        <view>头像</view>-->
<!--        <view class="imgRight">-->
<!--          <button-->
<!--            class="avatar-box"-->
<!--            open-type="chooseAvatar"-->
<!--            @chooseavatar="onChooseAvatar"-->
<!--          >-->
<!--            <image :src="userInfo.avatar || 'xxx默认头像' " />-->
<!--          </button>-->
<!--        </view>-->
<!--      </view>-->
      <view class="img">
        <view>昵称</view>
        <view class="imgRight">
          <input
            v-model="userInfo.nickName"
            type="nickname"
            placeholder="请输入昵称"
            :maxlength="16"
            @blur="blurInput"
          >
        </view>
      </view>
      <view class="bottom">
        <button
          class="save"
          formType="submit"
          style="background: #0ab906"
          @click="savaInfo"
        >
          保存
        </button>
      </view>
    </view>
  </uni-popup>
  </view>
</template>

<script setup>
import { toRefs, getCurrentInstance, defineProps, defineEmits } from 'vue'
const { proxy } = getCurrentInstance()
// 服务器接口地址
// 弹窗
const show = () => {
  proxy.$refs.popup.open()
}
defineExpose({
  show
})

// 用户信息
const props = defineProps({
  userInfo: Object,
  showStatus: Boolean,
})
const { userInfo, showStatus} = toRefs(props)
const emit = defineEmits(['update:userInfo', 'savaInfo'])
watch(()=> showStatus.value, (val, old) => {
  console.log(val)
})
// 微信头像获取
function onChooseAvatar (e) {
  const {
    avatarUrl
  } = e.detail
  userInfo.value.avatar = avatarUrl
}
// 用户昵称
function blurInput (e) {
  userInfo.value.nickName = e.detail.value
}
// 获取手机号
// 保存信息
const savaInfo = () => {
  emit('savaInfo', userInfo.value)
}
</script>

<style lang="scss">
.poshsoahs{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100vh;
  right: 0;

  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
}
	.popUpView{
    width: 100vw;
    height: 40vh;
    position: fixed;
    background: #ffffff;
    bottom: 0;
		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
      text-align: center;
			margin-bottom: 6rpx;
			padding: 20rpx;
		}
		.avatar-box {
			display: flex;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
			}
		}

		.img,
		.phone{
			display: flex;
			align-items: center;
			margin: 0 20rpx;
			padding: 30rpx 0;
			border-bottom: 1rpx solid gainsboro;
			button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 84rpx;
				height: 84rpx;
				border-radius: 6rpx;
				margin: unset;
				padding: unset;
				border: unset;
			}
			.imgRight{
				margin-left: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 80%;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.phone{
			button {
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 200rpx;
				height: 64rpx;
				border-radius: 6rpx;
				margin: unset;
				padding: unset;
				border: unset;
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: center;

			.save {
				border: 1px solid #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 368rpx;
				height: 80rpx;
				border-radius: 12rpx;
				margin-top: 52rpx;
				background-color: #F5F5F5;
				color: #ccc;
				font-size: 30rpx;
				font-weight: bold;
			}

			.save.open {
				border: 1px solid #fff;
				background-color: #07C160;
				color: #fff;
			}
		}
	}

</style>
